<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>教师列表</title>
<script type="text/javascript">

$(function(){
	$('#year').selectpicker({	//初始化下拉框
		title:'学年',
		width:'24%'
	}); 
	$('#term').selectpicker({	//初始化下拉框
		title:'学期',
		width:'24%'
	}); 
	$('#teacher').selectpicker({	//初始化下拉框
		title:'教师',
		width:'24%'
	}); 
	$('#kc').selectpicker({	//初始化下拉框
		title:'课程',
		width:'24%'
	});
	
	/* 查询样式 */
	$('#mySearch').on('hidden.bs.modal', function (e) {
		var year = $('#year').val();
		var term = $('#term').val();
		var teacher = $('#teacher').val();
		var kc = $('#kc').val();
		var tit='';
		if(year!=null&&year!=''){
			tit+=year+' \\ ';
		}
		if(term!=null&&term!=''){
			tit+=term+' \\ ';
		}
		if(teacher!=null&&teacher!=''){
			tit+=teacher+' \\ ';
		}
		if(kc!=null&&kc!=''){
			tit+=kc+' \\ ';
		}
		if(tit!=''){
			$('#tit').html(tit.slice(0,-2));
		}else{
			$('#tit').html('查询');
			}
		})
});

/* 教师发生变化是带动课程 */
function teacher(value){
	$("#kc").empty(); 
	$.ajax({  
		// get请求地址  
		    url: 'teaching/teacherChange?teacher='+value,  
		    dataType: "json",  
		    success: function (data) {  
		    	$('#kc').append("<option style='display: none;'></option>");
		        for (var i = 0; i < data.length; i++) {  
		            $('#kc').append("<option value=" + data[i] + "> "+ data[i] +"</option>");  
		        }  
		        // 缺一不可  
		        $('#kc').selectpicker('refresh');  
		        $('#kc').selectpicker('render');
		    }  
		}); 
	}
	
/* 学年发生变化时带动学期	 */
function year(value){
	$("#term").empty(); 
	$.ajax({  
		// get请求地址  
		    url: 'teaching/yearChange?year='+value,  
		    dataType: "json",  
		    success: function (data) {  
		    	$('#term').append("<option style='display: none;'></option>");
		        for (var i = 0; i < data.length; i++) {  
		            $('#term').append("<option value=" + data[i] + "> "+ data[i] +"</option>");  
		        }  
		        // 缺一不可  
		        $('#term').selectpicker('refresh');  
		        $('#term').selectpicker('render');
		    }  
		}); 
	}
	
//清空查询中的bootselect下拉框
function cleanSearch(){
	var searchs = $('#mySearch').find('div.modal-body').find('select.selectpicker');
	for(var i=0;i<searchs.length;i++){
		if(searchs[i].name=='teacher'||searchs[i].name=='year'){	//这里排除teacher和year
			$(searchs[i]).selectpicker('val','');
			continue;
		}
		$(searchs[i]).html('<option style="display: none"></option>');
		$(searchs[i]).selectpicker('refresh');
	} 
}
</script>
</head>
<body>
	<div id="teacher_table_div" class="container-fluid">
	
		<!-- 查询窗口 -->
		<div class="modal fade" id="mySearch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
           	<div class="modal-dialog" role="document">
                <div class="modal-content">
	                <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">查询</h4>
	                </div>
	               	<div class="modal-body">
	            	<!-- 以下为要查询的的内容 -->
	            		<!-- 学年 -->
	            		<select id="year" name="year" data-live-search="true" onchange="year(this.value);" data-bind="value:queryCondition.year" class="selectpicker">
							<option style="display: none;"></option>
							<option th:each="y:${yearlist}" th:text="${y}" th:value="${y}"></option>
						</select>
						
						<!-- 学期 -->
						<select id="term" name="term" data-live-search="true"data-bind="value:queryCondition.term" class="selectpicker">
							<option style="display: none;"></option>
						</select>
						
						<!-- 教师 -->
						<select id="teacher" name="teacher" data-live-search="true" onchange="teacher(this.value);" data-bind="value:queryCondition.teacher" class="selectpicker">
							<option style="display: none;"></option>
							<option th:each="t:${teacherlist}" th:text="${t}" th:value="${t}"></option>
						</select>
						
						<!-- 课程 -->
						<select id="kc" data-live-search="true" data-bind="value:queryCondition.course" class="selectpicker">
							<option style="display: none;"></option>
						</select>
	                <!-- 以上为要查询的内容 -->
					</div>
					<div class="modal-footer">
		                <button type="button" class="btn btn-primary" data-dismiss="modal" data-bind="click:queryClick"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click:clearClick" onclick="cleanSearch()"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空</button>
	            	</div>
                </div>
           	</div>
		</div> 
		
		<!-- 工具栏 -->
		<div id="toolbar" class="btn-group">
			<button data-bind="click:searchClick" type="button" id="tit"
				class="btn btn-default">
				<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
			</button>
			
		</div>
		<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
		<table id="mytable" data-bind="bootstrapTable:$root">
			<thead>
				<tr>
					<th data-checkbox="true"></th>
					<th data-field="year">年级</th>
					<th data-field="term">学期</th>
					<th data-field="classes">专业班级</th>
					<th data-field="course">课程名称</th>
					<th data-field="teacher">授课教师</th>
					<th data-field="time">授课日期</th>
					<th data-field="week">星期</th>
					<th data-field="jc">节次</th>
					<th data-field="sknr">授课内容</th>
					<th data-field="ydrs">应到人数</th>
					<th data-field="sdrs">实到人数</th>
					<th data-field="qqrs">缺勤人数</th>
					<th data-field="remarks">备注</th>
				</tr>
			</thead>
		</table>
	</div>
	
<!-- 以下是javascript内容 -->	
<script type="text/javascript">
$(function(){
    var data =  {
	    tableParams : {
	    		url : 'teaching/page'
	    	},
	    	urls : {
	    		search:'teaching/search'
	    	},
	    	queryCondition : {
				teacher : '',
				course : '',
				year : '',
				term : ''
	    	}
	};
	ko.applyBindings(new BsTableViewModel(data),document.getElementById('teacher_table_div'));	
});
</script>

</body>
</html>